<template>
  <van-config-provider :theme-vars="themeVars" theme="light">
    <van-nav-bar :title="props.navbarTitle" :fixed="true" :left-arrow="props.leftArrow" @click-right="onClickRight"
      @click-left="onClickLeft">
      <template #right>
        <van-icon name="wap-nav" size="24" />
      </template>
    </van-nav-bar>
  </van-config-provider>
  <ul class="dropdown-item" v-show="toggleMenu">
    <li v-for="(item, index) in menu" :key="index">
      <!-- <router-link :to="item.path" class="dropdown-item-link" @click="toggleMenu = !toggleMenu"> -->
      <a class="dropdown-item-link" @click.stop="gotoPage(item.path)">
        {{ item.name }}
      </a>
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

import { useStore } from '@/stores/index.js'
const store = useStore()

const router = useRouter()

const props = defineProps({
  leftArrow: {
    type: Boolean,
    default: false
  },
  navbarTitle: {
    type: String,
    default: '猫眼电影'
  }
})

const toggleMenu = ref(false)

const menu = ref([
  { name: '首页', path: '/' },
  { name: '榜单', path: '/billboard' },
  { name: '热点', path: '/information' },
  { name: '商城', path: '/store' },
])

//返回前一页
const onClickLeft = () => {
  // toggleMenu.value = !toggleMenu.value
  router.go(-1)
};
// 打开菜单
const onClickRight = () => {
  toggleMenu.value = !toggleMenu.value
};

// 跳转页面
const gotoPage = (path) => {
  // console.log("path", path);
  // console.log("store", store) // 添加调试信息，检查 store 是否为 undefined

  if (path === '/') {
    store.setActiveTab(1)
  }
  toggleMenu.value = !toggleMenu.value
  router.push({ path: `${path}` })
};


const themeVars = reactive({
  navBarHeight: '50.5px',
  navBarBackground: '#e54847',
  navBarTextColor: '#fff',
  navBarTitleTextColor: '#fff',
  navBarIconColor: '#fff',
  navBarTitleFontSize: '18px',

  // toastBackground: 'rgba(0,0,0,0.7)!important',
});

</script>

<style scoped>
.van-nav-bar {
  height: 50.5px;
  width: 100%;
  z-index: 999;
}

.dropdown-item {
  display: block;
  position: fixed;
  top: 50.5px;
  right: 12px;
  width: 80px;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.1);
}

.dropdown-item li {
  height: 45.5px;
  line-height: 45.5px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.dropdown-item-link {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #333;
  letter-spacing: 0;
  font-size: 15px;
}
</style>
